.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  backdrop-filter: blur(5px);
  color: #fff;

  &_top,
  &_bottom {
    top: -100%;
    transition: top .3s ease-in-out;

    &.show {
      top: 0;
    }
  }

  &_bottom {
    top: 100%;
  }

  &_left,
  &_right {
    left: -100%;
    transition: left .3s ease-in-out;

    &.show {
      left: 0;
    }
  }

  ._right {
    left: 100%;
  }

  .overlay_wrapper {
    height: 100%;
    position: relative;
    background: rgba(7, 17, 27, .8);

    .overlay_wrapper_main {
      padding: 64px 0;
      max-height: 580px;
      overflow: auto;
    }

    .overlay_wrapper_close {
      position: absolute;
      font-size: 30px;
      bottom: 30px;
      left: 50%;
      transform: translateX(-50%);
    }
  }
}
